<script type="text/javascript" src="__PUBLIC__/js/jquery/lin_star.js"></script>
                        	<div class="jqueryTitle mt5">
                            	<span>实现原理</span>
                            </div>
                            <div class="p15">
                            	监听星星元素的li的鼠标经过事件获取当前经过元素的index,然后用for循环把index前的元素全部加选中状态<br/>
                                监听星星元素的li的鼠标离开事件获取当前经过元素的index,然后用for循环把index前的元素全部删除选中状态<br/>
                                监听星星元素的li的鼠标单击事件获取当前经过元素的index,然后用for循环把index前的元素全部删除选中状态,并且返回index+1就是最终打的分数;然后通过修改其父类元素的data_enabled的值使其不能使用<br/>
                                你也可以通过自定义单击和经过回调函数，来完成你想要的效果！
                            </div>
                            
                        	<div class="jqueryTitle mt5">
                            	<span>相关参数</span>
                            </div>
                            <div class="p15">
                            	<table cellpadding="0" cellspacing="0" class="jqueryAttr">
                                	<thead>
                                    	<tr>
                                        	<th>参数名</th>
                                            <th>参数说明</th>
                                        </tr>
                                    </thead>
                                    <tbody>
		<tr>
        	<td>grades</td>
            <td>总分数:默认5</td>
        </tr>
        <tr>
        	<td>startGrades</td>
            <td>初始分数,默认0</td>
        </tr>
        <tr>
        	<td>enabled</td>
            <td>是否可以打分,默认1</td>
        </tr>
        <tr>
        	<td>starClass</td>
            <td>星星列表样式,默认lin_star</td>
        </tr>
                <tr>
        	<td>currentStarClass</td>
            <td>星星选中样式,默认current</td>
        </tr>
                <tr>
        	<td>starChild</td>
            <td>星星HTML元素,默认li</td>
        </tr>
        <tr>
        	<td>clickFunction</td>
            <td>单击回调事件</td>
        </tr>
         <tr>
        	<td>mouseenterFunction</td>
            <td>经过星星回调函数</td>
        </tr>
         <tr>
        	<td>mouseleaveFunction</td>
            <td>离开星星回调函数</td>
        </tr>        
        </tbody>
                                </table>
                            </div> 
                            <div class="jqueryTitle mt5">
                            	<span>演示效果</span>
                            </div>
                            <div class="p15">
                            	<p class="pt15">前期准备：头部加入jquery-1.7.2.min.js;lin_star.js文件;</p>
                            	<div class="pt15"><strong>效果</strong></div>
                                <p>CSS</p>
                                <pre>.lin_star{height:32px;}
.lin_star li{background: url(star.png) 0px 0px  no-repeat; width:32px; height:32px; float:left; display:inline; margin-right:5px;}
.lin_star li.current{background-position:0px -32px;}</pre>
                                <p>js</p>
                                <pre>$("#demo1").lin_star({
			'startGrades':0,
			'clickFunction':function(i){
				$('#serverStar').val(i);
			},
			mouseenterFunction:function(i){
				var str='';
				if(i>=1 && i<=2)
				{
					str='一般';
				}else if(i>2 && i<=4)
				{
					str='良好';
				}else{str='很好';}
				$('#serverTip').html(str);
			}
		});	  
		$("#demo2").lin_star({
			'clickFunction':function(i){
				$('#settingStar').val(i);
			},
			mouseenterFunction:function(i){
				var str='';
				if(i>=1 && i<=2)
				{
					str='一般';
				}else if(i>2 && i<=4)
				{
					str='良好';
				}else{str='很好';}
				$('#settingTip').html(str);
			}			
		});</pre>
                                <div class="blank10"></div>
                                
								<div id="demo1">
                                </div>
                                <div>服务Tip:<span id="serverTip"></span>&nbsp;&nbsp;服务分数：<input type="text"  id="serverStar"/></div>
								<div id="demo2">
                                </div>     
                                <div>环境Tip:<span id="settingTip"></span>&nbsp;&nbsp;环境分数：<input type="text"  id="settingStar"/></div>                           
                            	                             
                                
                            </div>  
 <div class="clearfix pt40 pb40">
                            	<a href="http://url.cn/So9ICn" title="《{$data.title}》源代码下载" class="jqueryDown" rel="nofollow" target="_blank">《{$data.title}》源代码下载</a>
                            </div>   
                        
 
 <script type="text/javascript">
 $(function(){
$("#demo1").lin_star({
			'startGrades':0,
			'clickFunction':function(i){
				$('#serverStar').val(i);
			},
			mouseenterFunction:function(i){
				var str='';
				if(i>=1 && i<=2)
				{
					str='一般';
				}else if(i>2 && i<=4)
				{
					str='良好';
				}else{str='很好';}
				$('#serverTip').html(str);
			}
		});	  
		$("#demo2").lin_star({
			'clickFunction':function(i){
				$('#settingStar').val(i);
			},
			mouseenterFunction:function(i){
				var str='';
				if(i>=1 && i<=2)
				{
					str='一般';
				}else if(i>2 && i<=4)
				{
					str='良好';
				}else{str='很好';}
				$('#settingTip').html(str);
			}			
		});	
	});
 </script>   
